import luckysheetMoreFormat from "../moreFormat"
// 设置格式列表的dom函数
const listDomFns = {
    automatic() {
        // 自动
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">自动不包含特定的数字格式</div>`)
        $('#fmtTypeDescContainer').html('')
    },
    text() {
        // 文本
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">在文本单元格中，数字做文本处理</div>`)

    },
    num(curCell) {
        // 数字
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
                小数位数：<input  style="width:40px;" min="0" type="number" id="numDecimal">
            </div>
            <div>
                <input  type="checkbox" id="numSepa">
                <label for="numSepa">显示千位分隔符</label>
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('数值格式用于一般数字的表示，货币和会计格式则提供货币值计算的专用格式。')


    },
    percent() {
        // 百分比
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
                小数位数：<input style="width:40px;" min="0" type="number" id="percentNumDecimal">
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('以百分数的形式显示单元格的值。')

    },
    sci() {
        // 科学计数
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
                小数位数：<input style="width:40px;" min="0" type="number" id="sciNumDecimal">
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('')

    },
    accounting() {
        // 会计也用货币的列表
        let arr = luckysheetMoreFormat.moneyFmtList

        // 会计
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>小数位数：<input style="width:40px;" min="0" type="number" id="accountingNumDecimal"></div>
            <div class="left-list-example" id="accountingList">
                ${arr.map((i, index) => `<div style="display:flex;" class="accountingItem ${index === 0 ? 'curListItem' : ''}" data-value="${i.value}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('会计格式可对一列数值进行货币符号和小数点对齐。')

        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#accountingList').off('click').on('click', function (e) {
                const curDom = $(e.target).closest('.accountingItem')
                if (curDom) {
                    $('#accountingList').find('.accountingItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)

    },
    currency() {
        let arr = luckysheetMoreFormat.moneyFmtList
        // 货币计数
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
                小数位数：<input style="width:40px;" min="0" type="number" id="currencyNumDecimal">
            </div>
            <div class="left-list-example" id="currencyList">
                ${arr.map((i, index) => `<div style="display:flex;" class="${index === 0 ? `curListItem currencyItem` : `currencyItem`}" data-value="${i.value}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('货币格式用于表示一般货币数值。会计格式可对一列数值小数点对齐。')


        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#currencyList').off('click')
            $('#currencyList').on('click', function (e) {
                const curDom = $(e.target).closest('.currencyItem')
                if (curDom) {
                    $('#currencyList').find('.curListItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)

    },
    date() {
        // 日期
        const arr = luckysheetMoreFormat.sfmtDate
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
            分类：
            </div>
            <div class="left-list-example" id="fmtDateList">
                ${arr.map((i, index) => `<div style="display:flex;" class="fmtDateItem ${index === 0 ? `curListItem` : ``}" data-value="${encodeURIComponent(i.value)}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('日期格式把日期和时间系列数显示为日期值。')

        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#fmtDateList').off('click')
            $('#fmtDateList').on('click', function (e) {
                const curDom = $(e.target).closest('.fmtDateItem')
                if (curDom) {
                    $('#fmtDateList').find('.curListItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)


    },
    time() {
        // 时间
        const arr = luckysheetMoreFormat.sfmtTime
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
            分类：
            </div>
            <div class="left-list-example" id="fmtDateList">
                ${arr.map((i, index) => `<div style="display:flex;" class="fmtDateItem ${index === 0 ? `curListItem` : ``}" data-value="${encodeURIComponent(i.value)}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)

        $('#fmtTypeDescContainer').html('时间格式把日期和时间序列数显示为时间值。')


        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#fmtDateList').off('click')
            $('#fmtDateList').on('click', function (e) {
                const curDom = $(e.target).closest('.fmtDateItem')
                if (curDom) {
                    $('#fmtDateList').find('.curListItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)
    },
    custom() {
        // 自定义
        const arr = luckysheetMoreFormat.customArr
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
            分类：
            </div>
            <div class="left-list-example" id="fmtDateList">
                ${arr.map((i, index) => `<div style="display:flex;" class="fmtDateItem ${index === 0 ? `curListItem` : ``}" data-value="${encodeURIComponent(i.value)}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('以现有格式为基础，生成自定义的数字格式。')

        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#fmtDateList').off('click')
            $('#fmtDateList').on('click', function (e) {
                const curDom = $(e.target).closest('.fmtDateItem')
                if (curDom) {
                    $('#fmtDateList').find('.curListItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)
    },
    special() {
        // 特殊
        const arr = luckysheetMoreFormat.specialArr
        $('#setfmtRightContainer').html(`<div style="padding:0 10px;">
            <div>
            分类：
            </div>
            <div class="left-list-example" id="fmtDateList">
                ${arr.map((i, index) => `<div style="display:flex;" class="fmtDateItem ${index === 0 ? `curListItem` : ``}" data-value="${encodeURIComponent(i.value)}">
                    <div>${i.name}</div>
                    <div class="left-str-example">${i.value}</div>
                </div>`).join('')} 
            </div>
        </div>`)
        $('#fmtTypeDescContainer').html('特殊格式用于跟踪数据列表及数据库的值。')

        setTimeout(() => {
            // $('#currencyList').find('div')[0].click()
            $('#fmtDateList').off('click')
            $('#fmtDateList').on('click', function (e) {
                const curDom = $(e.target).closest('.fmtDateItem')
                if (curDom) {
                    $('#fmtDateList').find('.curListItem').removeClass('curListItem')
                    curDom.addClass('curListItem')
                }
            })
        }, 10)
    }
}

export default listDomFns